import { useAppStore } from '@/store'

export default function resizeHandler() {
  const appStore = useAppStore()
  const WIDTH = 992 // refer to Bootstrap's responsive design

  const handleResize = () => {
    const rect = document.body.getBoundingClientRect()
    const isMobile = rect.width - 1 < WIDTH
    appStore.setDevice(isMobile ? 'mobile' : 'desktop')
    
    if (isMobile) {
      appStore.setSidebarCollapsed(true)
    }
  }

  window.addEventListener('resize', handleResize)

  // 初始化时执行一次
  handleResize()

  return {
    handleResize
  }
}